import React,{Component} from 'react';
import { connect } from 'react-redux';
import style from './styles.module.less';
import { Layout , Form, Input, Button, Checkbox, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { STATUS } from './models';
import Logo from '&images/logo.jpg';
const { Header, Footer, Content } = Layout;

class Login extends Component {


  componentDidUpdate() {
    const {store, history} = this.props;
    if(store.status === STATUS.LOGIN) {
      // history.replace({
      //   pathname: '/admin'
      // })
      if(this.props.store.role){
        history.replace({
          pathname:'/admin'
        })
      }else{
        history.replace({
          pathname:'/user'
        })
      }
    }
  }

  componentDidMount() {
    this.refeshCode();
  }

  onFinish = values => {
    const data = {
      ...values,
      verKey: this.props.store.captchaKey
    };
    this.props.login(data);
  };

  refeshCode = () => {
    this.props.getCaptcha();
  }
  

  render(){
    const {store} = this.props;
    return(
      <div className={style.loginPage}>
        <Layout className={style.transparent}>
          <Header className={style.transparent} ></Header>
          <Content className={`${style.transparent} ${style.layoutContent}`}>
            <div className={style.logo}>
              <div>
                <img className={style.logoImg} src={Logo} alt="logo"/>
                <span className={style.title}>普开数据</span>
              </div>
            </div>
            <div className={style.info}>普开数据 用数据改变未来</div>
              <div className={style.loginContent}>
                <Form
                  name="normal_login"
                  className="login-form"
                  initialValues={{ remember: true }}
                  onFinish = {this.onFinish}
                >
                  <Form.Item name="cardId" rules={[{ required: true, message: '请输入账号' }]}>
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" size="large"/>
                  </Form.Item>

                  <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                    <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码"size="large"/>
                  </Form.Item>.

                  <Form.Item >
                    <Row gutter={8} className={style.cen}>
                      <Col span={12}>
                        <img src={store.captcha} onClick={this.refeshCode}/>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          name="verCode"
                          noStyle
                          rules={[{ required: true, message: '请输入验证码' }]}
                        >
                          <Input placeholder='验证码'/>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form.Item>

                  <Form.Item>
                    <Row gutter={8}>
                      <Col span={12}>
                        <Checkbox>自动登录</Checkbox>
                      </Col>
                      <Col span={12}>
                        <a className="login-form-forgot" href="">忘记密码</a>
                      </Col>
                    </Row>
                  </Form.Item>
                  <Form.Item>
                    <Button size='large' type="primary" htmlType="submit" className={style.loginFormButton}>登录</Button>
                  </Form.Item>
                </Form>
            </div>
          </Content>
          <Footer className={style.transparent}></Footer>
        </Layout>
      </div>
    )
  }
}

const mapStateToProps = state => ({ store: state.user })
const mapDispatchToProps = dispatch => ({
  login: dispatch.user.login,
  getCaptcha: dispatch.user.getCaptcha
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);